<template>
    <view style="height: 100%">
        <label :class="'form-item ' + (disabled ? 'disabled' : '') + ' l-class form-item-' + labelLayout" :style="'width:' + (width === null ? 'auto' : width + 'rpx')">
            <view class="mask" v-if="disabled"></view>
            <view class="row" v-if="!(showRow ? '' : 'hidden')" :style="'width:' + width + 'rpx;'"></view>
            <view
                v-if="!hideLabel"
                :class="'form-label l-label-class form-label-' + labelLayout"
                :style="(labelLayout !== 'top' ? 'width:' + labelWidth + 'rpx;' : '') + ' height:' + (labelLayout === 'top' ? labelWidth + 'rpx' : '')"
            >
                <text>
                    <text class="text-require" v-if="required">*</text>
                    {{ label }}
                    <text v-if="colon">：</text>
                </text>
            </view>
            <view
                v-else
                v-if="!hideLabel"
                :class="'form-label l-label-class form-label-' + labelLayout"
                :style="(labelLayout !== 'top' ? 'width:' + labelWidth + 'rpx;' : '') + ' height:' + (labelLayout === 'top' ? labelWidth + 'rpx' : '')"
            >
                <slot name="left" />
            </view>

            <input
                :class="'input ' + (hideLabel ? 'hideLabel' : '') + ' l-input-class'"
                :value="valueClone"
                :type="typeClone"
                :password="typeClone === 'password'"
                :placeholder="placeholder"
                :maxlength="maxlength"
                placeholder-class="pls-class"
                :placeholder-style="placeholderStyle"
                :disabled="disabled"
                :focus="focus"
                @input="handleInputChange"
                @focus="handleInputFocus"
                @blur="handleInputBlur"
                @confirm="handleInputConfirm"
            />
            <l-icon v-if="showEye && valueClone" name="eye" @tap.native.stop.prevent="onTapEyeIcon" size="40" :l-class="'l-eye l-eye-' + typeClone" />
            <view class="close" v-if="clear && valueClone" mut-bind:tap="onClearTap">
                <view class="close-icon">
                    <l-icon name="close" color="#fff" size="16" />
                </view>
            </view>
            <slot name="right" />
            <l-error-tip l-error-text-class="l-error-text l-error-text-class" :errorText="errorText" v-if="errorText" />
        </label>
    </view>
</template>

<script>
import lIcon from '../icon/index';
import lErrorTip from '../error-tip/index';
import eventBus from '../core/utils/event-bus.js';
import validator from '../behaviors/validator';
import rules from '../behaviors/rules';
export default {
    data() {
        return {
            errorText: '',
            valueClone: '',
            typeClone: ''
        };
    },

    options: {
        multipleSlots: true
    },

    mixins: ['wx://form-field', validator, rules],
    externalClasses: ['l-class', 'l-label-class', 'l-error-text', 'l-error-text-class', 'l-input-class'],

    props: {
        label: String,
        hideLabel: Boolean,
        labelCustom: Boolean,
        showRow: {
            type: Boolean,
            default: true
        },
        required: Boolean,
        placeholder: String,
        type: {
            type: String,
            default: 'text',
            options: ['text', 'idcard', 'digit', 'password', 'number']
        },
        value: String,
        colon: Boolean,
        focus: Boolean,
        clear: Boolean,
        maxlength: {
            type: Number,
            default: 140
        },
        width: {
            type: Number,
            default: null
        },
        labelWidth: {
            type: Number,
            default: 200
        },
        labelLayout: {
            type: String,
            default: 'left',
            options: ['left', 'right']
        },
        disabled: Boolean,
        placeholderStyle: String,
        showEye: {
            type: Boolean,
            default: false
        }
    },

    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },

    methods: {
        attached() {},

        handleInputChange(e) {
            const { detail: t = {} } = e;
            const { value: a = '' } = t;
            this.setData({
                valueClone: a
            });
            eventBus.emit('lin-form-change-' + this.id, this.id);
            this.$emit('lininput', {
                detail: e.detail
            });
        },

        handleInputFocus(e) {
            this.$emit('linfocus', {
                detail: e.detail
            });
        },

        handleInputBlur(e) {
            this.validatorData({
                [this.name]: e.detail.value
            });
            eventBus.emit('lin-form-blur-' + this.id, this.id);
            this.$emit('linblur', {
                detail: e.detail
            });
        },

        handleInputConfirm(e) {
            const { detail: t = {} } = e;
            const { value: a = '' } = t;
            this.setData({
                valueClone: a
            });
            this.$emit('linconfirm', {
                detail: e.detail
            });
        },

        onClearTap(e) {
            this.setData({
                valueClone: ''
            });
            this.$emit('linclear', {
                detail: e.detail
            });
        },

        getValues() {
            return this.valueClone;
        },

        reset() {
            this.setData({
                valueClone: ''
            });
        },

        onTapEyeIcon() {
            const e = this.typeClone;
            if ('text' === e) {
                this.setData({
                    typeClone: 'password'
                });
            } else {
                if ('password' === e) {
                    this.setData({
                        typeClone: 'text'
                    });
                }
            }
        }
    },

    created: function () {}
};
</script>
<style>
.form-item {
    position: relative;
    font-size: 28rpx;
    color: #333;
    height: 88rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-right: 25rpx;
    box-sizing: border-box;
}
.row {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 2rpx;
    width: 730rpx;
    background: #f3f3f3;
}
.text-require {
    color: #e23;
    vertical-align: middle;
}
.form-label {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 88rpx;
    padding-left: 25rpx;
    padding-right: 15rpx;
    box-sizing: border-box;
}
.disabled {
    color: #9a9a9a !important;
}
.mask {
    position: absolute;
    z-index: 999;
    height: 100%;
    width: 100%;
}
.form-label-right {
    justify-content: flex-end;
}
.form-label-left {
    justify-content: flex-start;
}
.input {
    height: 100%;
    line-height: 100%;
    flex: 1;
}
.close {
    height: 36rpx;
    width: 36rpx;
    background: #ddd;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 20rpx;
}
.pls-class {
    color: #9a9a9a;
}
.hideLabel {
    padding-left: 25rpx;
}
.l-eye {
    padding: 10rpx;
}
.l-eye-text {
    color: #3963bc !important;
}
.l-eye-password {
    color: rgba(57, 99, 188, 0.6) !important;
}
</style>
